<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>入职详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1537426_zmse968mns.css">
    <script src="./js/rem.js"></script>
</head>
<style>
#entry{width: 100%;}
#entry .nav{width: 100%; padding:0.9375rem 0;background-color: #2F93F3;color: #fff;}
#entry .nav i{position: absolute;left: 0.9375rem;top:0.59rem}
#entry .nav i.iconfont{font-size: 1.875rem!important;}
#entry .nav p{width:4rem;font-weight: 700;}

#entry .wrap{width: 100%;}
#entry .wrap .nav-bgc{position: relative;width: 100%;height: 6.875rem;background-color: #2F93F3;}
#entry .wrap .nav-bgc .id-box{position: absolute;top:2.1875rem;width: 90%;height: 8.75rem;border-radius: 0.625rem;box-shadow:0rem 0rem 0.3125rem 0.0625rem rgba(0,0,0,0.1);background-color: #fff;}
#entry .wrap .nav-bgc .id-box .idInfo{padding:0.625rem 0.625rem;}
#entry .wrap .nav-bgc .id-box .idInfo .headImg{width: 30%; align-content: center;}
#entry .wrap .nav-bgc .id-box .idInfo .headImg img{width: 4.375rem;height: 4.375rem;border-radius: 0.625rem;}
#entry .wrap .nav-bgc .id-box .idInfo .stuInfo{width: 70%;}
#entry .wrap .nav-bgc .id-box .idInfo .stuInfo p{font-size:0.875rem;color:#000;font-weight:500;opacity:.5;font-family: 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;}
#entry .wrap .nav-bgc .id-box .idInfo .stuInfo p.name{font-size: 1rem;font-weight: 700;opacity: 1;}
#entry .wrap .nav-bgc .id-box .idInfo .stuInfo p.experience{padding:0.3125rem 0;}
#entry .wrap .nav-bgc .id-box .idInfo .stuInfo p span{padding-right: 1.25rem;}
#entry .wrap .nav-bgc .id-box div.brief{ padding:0 1.25rem 1.25rem 1.25rem;color: skyblue;font-size: 0.875rem;}

#entry .wrap .company-details{margin-top: 6.25rem;}
#entry .wrap .company-details .title{padding-left: 1.25rem;}
#entry .wrap .company-details .title i{color: skyblue;padding-top: 0.25rem;}
#entry .wrap .company-details .title i.iconfont{font-size: 1.5625rem!important;}
#entry .wrap .company-details .title p{padding-left:0.5rem;padding-top:0.5rem;font-size: 1rem;font-weight: bold;font-family:'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;}
#entry .wrap .company-details .commpany-desc{padding: 1.25rem;font-size: 0.875rem;opacity: .8;text-indent: 2em;}
#entry .wrap .company-details .company-img{padding: 0 1.25rem;}
#entry .wrap .company-details .company-img img{width: 100%;}


</style>
<body>
    <div id="entry">
        <div class="nav flex justify-center">
            <i class="icon iconfont iconback" @click="back"></i>
            <p>入职详情</p>
        </div>
        <div class="wrap">
            <div class="nav-bgc flex justify-center">
                <!-- 信息盒子 -->
                <div class="id-box">
                    <div class="idInfo flex">
                        <div class="headImg flex justify-center">
                            <img src="./img/head1.png" alt="">
                        </div>
                        <div class="stuInfo">
                            <p class="name" v-text="name"></p>
                            <p class="experience"> 
                                <span v-text="education"></spanv->
                                <span v-text="'薪资：'+salary"></span>
                            </p>
                            <p v-text="'毕业于'+graduated"></p>
                        </div>
                    </div>
                    <div class="brief" v-text="brief"></div>
                </div>

            </div>
            <!-- 入职公司详情-->
            <div class="company-details">
                <div class="title flex">
                    <i class="icon iconfont icongongsixinxi"></i>
                    <p>入职公司详情</p>
                </div>
                <!-- 具体描述 -->
                <div class="commpany-desc">
                    <span v-text="company_desc"></span>
                </div>
                <div class="company-img">
                    <img :src="company_img" alt="">
                </div>
            </div>
        </div>
    </div>
</body>

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
 var entry = new Vue({
     el:'#entry',
     data:{
         name:'黄一璐',
         education:'本科',
         salary:'8k',
         graduated:'浙江大学城学院',
         brief:'简介：性格活泼开朗，喜欢运动，对待工作有热情，有积极性，喜欢挑战。',
         company_desc:'杭州会友科技有限公司是一家致力于行业移动解决方案的软件公司。主要提供行业解决方案的商业策略，咨询设计，定制研发等服务。核心团队成立于2012年，现已在宁波、台州等地设立分公司和办事处，技术人员60余人，已上线项目百余款。公司秉承着“精工细作，科技会友”的创业理念，致力做行业内领先的移动应用开发服务商。',
         company_img:'./img/company-img.png',
     },
     methods: {
         back:function(){
            window.location.href='./excellentStudents.html';
            window.history.back(-1); 
         }
     },
 })
</script>
</html>